{% extends 'base.html' %}
{% block title %}海台数据分析系统首页{% endblock %}
{% block head %}
    <link href="{% static 'css/apexcharts.css' %}" rel="stylesheet">
    <link rel="stylesheet" href="{% static 'css/leaflet.css' %}"/>
    <link rel="stylesheet" href="{% static "css/movable.css" %}"/>
    <style>
        .map-container {
            height: 100%; /* 设置父容器的高度 */
        }

        #map {
            height: 600px;
            border-radius: 15px; /* 设置圆角 */
            overflow: hidden;
        }
        #typhoon-list {
            max-height: 300px;  /* 根据需要调整最大高度 */
            overflow-y: auto;   /* 添加垂直滚动条 */
            padding-right: 10px; /* 防止滚动条覆盖内容 */
        }
    </style>
    <meta name="csrf-token" content="{{ csrf_token }}">
{% endblock %}
{% block pageName %}首页{% endblock %}
{% block main %}
    <div id="draggable-window" class="window">
        <div class="window-header " id="window-header">
            <form method="get" action="{% url 'clientApp:get_typhoon' %}">
                <label for="year">台风年份:</label>
                <select name="year" class="btn btn-secondary dropdown-toggle" id="year-select">
                    {% for year in years %}
                        <option value="{{ year }}" class="dropdown-item">
                            {{ year }}年
                        </option>
                    {% endfor %}
                </select>
            </form>
            <button id="toggle-btn">☰</button> <!-- 用于切换显示/隐藏内容 -->
        </div>
        <div class="window-content">
            <ul class="list-group" id="typhoon-list">
                
            </ul>
        </div>
    </div>
    <div class="map-container">
        <div id="map"></div>
    </div>

{% endblock %}
{% block footer %}
    <a href="#" class="page-footer-item page-footer-item-right">下一页
        <i data-feather="arrow-right" class="footer-right"></i></a>
{% endblock %}
{% block js %}
    <script src="{% static 'js/apexcharts.min.js' %}"></script>
    <script src="{% static 'js/jquery.sparkline.min.js' %}"></script>
    <script src="{% static 'js/dashboard.js' %}"></script>
    <script src="{% static 'js/leaflet.js' %}" type="text/javascript"></script>
    <script src="{% static 'js/movable.js' %}"></script>
    <script src="{% static 'js/leaflet.ChineseTmsProviders.js' %}" type="text/javascript"></script>
    <script type="text/javascript">
        var map = L.map('map').setView([39.90469, 116.40717], 7);
        {#L.tileLayer.chinaProvider('GaoDe.Normal.Map',{maxZoom:18,minZoom:5}).addTo(map);#}
        L.tileLayer.chinaProvider('GaoDe.Satellite.Map', {maxZoom: 18, minZoom: 4}).addTo(map);
        L.tileLayer.chinaProvider('GaoDe.Satellite.Annotion', {maxZoom: 18, minZoom: 4}).addTo(map);

        // 定义24小时和48小时警戒线的坐标
        var warningLine24h = [
            [0.0, 105.0],   // 0°N, 105°E
            [4.5, 113.0],   // 4.5°N, 113°E
            [11.0, 119.0],  // 11°N, 119°E
            [18.0, 119.0],  // 18°N, 119°E
            [22.0, 127.0],  // 22°N, 127°E
            [34.0, 127.0]   // 34°N, 127°E
        ];

        var warningLine48h = [
            [0.0, 105.0],   // 0°N, 105°E
            [0.0, 120.0],   // 0°N, 120°E
            [15.0, 132.0],  // 15°N, 132°E
            [34.0, 132.0]   // 34°N, 132°E
        ];

        // 绘制24小时警戒线
        var polyline24h = L.polyline(warningLine24h, {
            color: 'red', // 线条颜色
            weight: 3, // 线条宽度
            opacity: 0.7 // 线条透明度
        }).addTo(map).bindPopup('24小时台风警戒线');

        // 绘制48小时警戒线（虚线）
        var polyline48h = L.polyline(warningLine48h, {
            color: 'orange', // 线条颜色
            weight: 3, // 线条宽度
            opacity: 0.7, // 线条透明度
            dashArray: '10, 10' // 设置虚线样式
        }).addTo(map).bindPopup('48小时台风警戒线');

        // 创建图例控件
        var legend = L.control({position: 'bottomleft'});

        legend.onAdd = function (map) {
            var div = L.DomUtil.create('div', 'info legend');
            div.innerHTML += '<i style="background: red; color: red;"></i> <span style="color: red;">24小时警戒线</span><br>';
            div.innerHTML += '<i style="background: orange; color: orange;"></i> <span style="color: orange;">48小时警戒线</span><br>';
            return div;
        };

        legend.addTo(map);

        // 调整地图视野以适应警戒线
        var allLines = [warningLine24h, warningLine48h];
        var bounds = L.latLngBounds(allLines.flat());
        map.fitBounds(bounds);
    </script>
    <script src="{% static 'js/year.select.js' %}" type="text/javascript"></script>
{% endblock %}
